<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <meta name="referrer" content="origin">
    <title>日新网 - 兑换票</title>
    <link rel="stylesheet" href="__TMPL__Public/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/reset.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/style.css">
    <script type="text/javascript" src="__TMPL__Public/assets/js/rem.js"></script>
</head>
<style>
    .exchange {
        margin:20px 20px;
    }
    .exchange h4 {
        font-size: 16px;
        color: #b60a60;
        font-weight: bold;
        text-align: center;
        letter-spacing: 1px;
        margin-bottom: 40px;
    }
    .exchange_item {
        font-size: 14px;
        color: #4a4b6e;
        margin-bottom: 20px;
    }
    .exchange_item span {
        display: inline-block;
        line-height: 20px;
        letter-spacing: 1px;
        font-weight: bold;
    }
    .exchange_item .name {
        width: 80px;
        float: left;
        text-align: right;
    }
    .exchange_item .text {
        display: block;
        margin-left: 90px;
    }
    .exchange .input-code {
        font-size: 14px;
        color: #4a4b6e;
        margin: 60px auto;
        text-align: center;
        font-weight: bold;
    }
    input {
        width:280px;
        text-align: center;
        font-size: 16px;
        color: #000232;
        height: 30px;
        line-height: 30px;
        border:none;
        border-bottom: 1px solid #c5c5c5;
        background-color: #f9f9f9;

    }
    .exchange-btn {
        width: 300px;
        height: 36px;
        font-size: 14px;
        line-height: 36px;
        color: #fff;
        text-align: center;
        letter-spacing: 2px;
        background-color: #b60a60;
        border-radius: 10px;
        margin: 60px auto 0;
    }
</style>
<body>


<!--主要内容-->
<div class="exchange">
    <h4 id="status">{$status}</h4>
    <div class="exchange_item">
        <span class="name">活动名称:</span>
        <span class="text">{$info.act_name}</span>
    </div>
    <div class="exchange_item">
        <span class="name">票种名称:</span>
        <span class="text">{$info.ticket_name}</span>
    </div>
    <div class="exchange_item">
        <span class="name">价格:</span>
        <span class="text">{$info.price}</span>
    </div>
    <div class="exchange_item">
        <span class="name">张数:</span>
        <span class="text">{$info.ticket_num}</span>
    </div>
    <div class="exchange_item">
        <span class="name">购票人姓名:</span>
        <span class="text">{$info.user_name}</span>
    </div>

    <p class="input-code">请输入验证码</p>
    <div style="text-align: center;">
        <input type="hidden" name="order_id" value="{$order_id}" id="order_id">
        <input type="text" name="ticket_code" id="ticket_code">
    </div>
    <div class="exchange-btn">确认兑换</div>
</div>


<script type="text/javascript" src="__TMPL__Public/assets/js/jquery.1.12.4.js"></script>
<script src="__TMPL__Public/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/layer/layer_1.js"></script>
<script>
    $("#ticket_code").focus();
    $('.exchange-btn').click(function () {
        var url         = "{:U('Activity/Activity/exchange_paper_ticket')}";
        var order_id    = $('#order_id').val();
        var ticket_code = $('#ticket_code').val();
        if (ticket_code) {
            $.post(url, {order_id : order_id, ticket_code : ticket_code}, function (re) {
                layer.msg(re.info);
                if (re.status) {
                    $('#status').text(re.info);
                }
            })
        }
    })
</script>
</body>
</html>